<!--从业者-考证培训（含自定义tabBar） -->
<template>
	<view class="course-container">
		<!-- 课程列表 -->
		<view class="course-list">
			<view class="course-item" v-for="(course, index) in publicbkz" :key="index">
				<view class="course-left">
					<u-image :src="course.bkzlogourl" width="220rpx" height="240rpx" mode="aspectFill" radius="4"></u-image>
				</view>

				<view class="course-right">
					<text class="course-name">{{ course.bkzname }}</text>
					<text class="course-level">可报名等级：{{ course.levelname }}</text>
					<text class="course-teacher">报名截止时间：{{ course.bmenddate }}</text>
					<text class="course-count">报名城市：{{ course.bkzbkcs }}</text>
					<text class="course-price">报名费用：¥{{ course.bkzprice }}元起/人</text>


					<view class="course-actions">
						<text class="course-category"></text>
						<u-button v-if="course.isbuy == 0 && course.isguoqi == 0" type="default" size="medium" shape="circle"
							@click="buyCourse(course.bkzcode)" :custom-style="customStyle">
							报名
						</u-button>
						<u-button v-else-if="course.isbuy == 1 && course.isguoqi == 0" type="default" size="medium" shape="circle"
							:custom-style="customStylehui">
							已报名
						</u-button>
						<u-button v-else type="default" :custom-style="customStylehui" size="medium" shape="circle">
							已截止
						</u-button>

					</view>
				</view>
			</view>
		</view>

		<!-- 自定义tabtar -->
		<u-tabbar v-model="current" :show="show" :bg-color="bgColor" :border-top="borderTop" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor" @change="change"></u-tabbar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					// "backgroundColor": "#03B8CD"
					"color": "#03B8CD",
					"border": "2rpx solid #03B8CD"
				},
				customStylehui: {
					"color": "#c3c3c3",
					"border": "2rpx solid #e1e1e1"
				},
				value1: '',
				value2: '2',
				options1: [{
						label: '考试',
						value: 1,
					},
					{
						label: '培训',
						value: 2,
					},
					{
						label: '考培',
						value: 3,
					}
				],
				options2: [{
						label: '一级',
						value: 1,
					},
					{
						label: '二级',
						value: 2,
					},
					{
						label: '三级',
						value: 3,
					}
				],
				courseList: [{
						id: 1,
						cover: '/static/course1.jpg',
						name: '前端开发高级课程',
						level: '一级、二级、三级、四级',
						expirDate: '6月20日 00:00',
						lessonCount: 45,
						price: '80.00',
						city: '福州',
						purchased: false
					},
					{
						id: 2,
						cover: '/static/course2.jpg',
						name: 'UI设计实战课程',
						level: '一级',
						expirDate: '6月10日 00:00',
						lessonCount: 45,
						price: '80.00',
						city: '福州',
						purchased: true
					}
				],
				kzBuying: [], ///已经支付的报考列表
				// 底部tabtar
				current: 1,
				show: true,
				bgColor: '#F1F7F7',
				borderTop: true,
				list: '',
				midButton: false,
				inactiveColor: '#516178',
				activeColor: '#03B8CD'
			}
		},
		onLoad() {
			this.list = [{
						iconPath: "/static/xuexi_1.png",
						selectedIconPath: "/static/xuexi_2.png",
						text: '在线学习',
						count: 0,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "/static/kaozheng_1.png",
						selectedIconPath: "/static/kaozheng_2.png",
						text: '考证培训',
						customIcon: false,
					},
					{
						iconPath: "/static/qiuzhi_1.png",
						selectedIconPath: "/static/qiuzhi_2.png",
						text: '个人求职',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "/static/jingsai_1.png",
						selectedIconPath: "/static/jingsai_2.png",
						text: '职业竞赛',
						customIcon: false,
					},
					{
						iconPath: "/static/wode_1.png",
						selectedIconPath: "/static/wode_2.png",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
					},
				],
				this.current = 1
		},
		computed:{
			// 过滤只显示发布的考证
			publicbkz() {
				return  this.courseList.filter(item => String(item.publishstate) == '1')
			} 

			
		},
		onShow() {
			this.current = 1
			// 查询所有考证列表
			this.queryExamList()

			
		},
		methods: {
			// 查询考证列表
			queryExamList() {
				this.$u.api.congyequerykzlist({	
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('从业者考证-1：', res)
					this.courseList = []
					let baseinfo = res.data.base_info	
					for(var i=0; i< baseinfo.length; i++) {
						this.courseList.push({
							bkzcode : baseinfo[i].bkz_code,
							bkzlogourl: baseinfo[i].bkz_logo_uri[0].url,
							bkzname: baseinfo[i].bkz_name,
							levelname: baseinfo[i].bkz_levelnames,
							bmenddate: baseinfo[i].bkz_bmenddate,
							bkzbkcs: baseinfo[i].bkz_bkcs,
							bkzprice: this.minPrice(baseinfo[i].bkz_levels),
							publishstate: baseinfo[i].bkz_publishstate							
						})
					}
					// 给每个数组对象添加一个isbuy的字段
					this.courseList = this.courseList.map(item =>({
						...item,
						isbuy: 0,
						isguoqi: 0
					}))
					console.log('分布查询考证列表：', this.courseList)
					// 查询当前用户已经报名的考证
					this.selectCyKzbm()
					// 判断考证是否过期
					this.isDateGuoQi()
				})
			},
			// 查询当前用户已经报名的考证
			selectCyKzbm() {
				this.$u.api.querykzbm({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('取回已经报名支付的考证：',res)
					let baseinfo = res.data.base_info	
					this.kzBuying = baseinfo
					// 匹配两个数组，一样的isbuy=1
					// this.peiKzArray()
				})
			},
			// 匹配两个数组，一样的isbuy=1
			peiKzArray() {
				// 若福利题库存在，就进入，否则就不进行整合
				if(this.kzBuying.length !== 0) {
					const kzIds = this.kzBuying.map(item => item.bkz_code);				
					this.courseList.forEach(kzItem => {
							if (kzIds.includes(kzItem.bkzcode)) {
									this.$set(kzItem, 'isbuy', 1);
							}
					});				
				}
					console.log('tkfl-2:',this.courseList)
			},
			
			// 判断考证是否过期
			isDateGuoQi() {
				let now = new Date()				
				this.courseList.forEach(kzItem => {
						if (now > new Date(kzItem.bmenddate)) {
								this.$set(kzItem, 'isguoqi', 1);
						}
				});		
			},
			
			// 最低的费用
			minPrice(price) {
				if(!price.length) return null;
				// return Math.min(...price.map(item => item.kzl_price))
				let minprice = price.reduce((min, current) => 
				    current.kzl_price < min.kzl_price ? current : min
				  );
				return minprice.kzl_price
				// console.log('mini:', minprice,minprice.kzl_price)
				
			},
			changeLevel(index) {
				this.currentLevel = index;
				// 这里可以根据选择的等级筛选课程
				// this.filterCourses();
			},
			// 报名
			buyCourse(code) {
				// uni.showToast({
				// 	title: '购买课程: ' + id,
				// 	icon: 'none'
				// });
				// 实际开发中调用报名接口
				uni.navigateTo({
					url: `/pages/Practitioner/examTrain/examDetails?bkzcode=${code}`
				});
			},
			// 带参数跳转
			studyCourse(id) {
				uni.navigateTo({
					url: `/pages/course/study?id=${id}`
				});
			},
			// 底部tabBar切换
			change(index) {
				// this.$u.toast(`点击了第${index}项`);
				if (index == 0) {
					// 当前页为在线课程
					console.log("tabindex-0:", index)
					this.current = 0;
					uni.reLaunch({
						url: '/pages/Practitioner/learning/learning'
					});
				} else if (index == 1) {
					// 当前页为考证培训
					console.log("tabindex-1:", index)
					this.current = 1;
					uni.reLaunch({
						url: '/pages/Practitioner/examTrain/examTrain'
					});
				} else if (index == 2) {
					// 当前页为个人求职
					console.log("tabindex-2:", index)
					this.current = 2;
					uni.reLaunch({
						url: '/pages/Practitioner/applyJob/applyJob'
					});
				} else if (index == 3) {
					// 当前页为职业竞赛
					this.current = 3;
					uni.reLaunch({
						url: '/pages/Practitioner/prizeFight/prizeFight'
					});
				} else if (index == 4) {
					// 当前页为我的
					this.current = 4;
					uni.reLaunch({
						url: '/pages/Practitioner/mine/mine'
					});
				}

				// console.log("tabindex:", index)
				// uni.navigateTo({
				// 	url: '/pages/recruitment/create'
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.course-container {
		padding: 20rpx;
		background-color: #f5f7fa;
	}

	.category-header {
		padding: 20rpx 0;

		.category-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.filter-section {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 8rpx;
		// margin-bottom: 20rpx;

		.filter-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.filter-tags {
			display: flex;
			flex-wrap: wrap;

			.tag-item {
				margin-right: 20rpx;
				margin-bottom: 15rpx;
			}
		}
	}

	.course-list {
		background-color: #fff;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.course-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}
	}

	.course-left {
		margin-right: 20rpx;
	}

	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.course-level,
	.course-teacher {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.course-rating {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;

		.rating-value {
			font-size: 24rpx;
			color: #ff9900;
			margin-left: 10rpx;
		}
	}

	.course-footer {
		display: flex;
		// justify-content: space-between;
		margin-top: 10rpx;

		.course-count {
			font-size: 24rpx;
			color: #999;
			margin-right: 10px;
		}

		.course-price {
			font-size: 28rpx;
			color: #f56c6c;
			font-weight: bold;
		}
	}

	.course-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;


		.course-category {
			font-size: 24rpx;
			color: #999;
			background-color: #f5f7fa;
			padding: 6rpx 12rpx;
			border-radius: 20rpx;
			margin-left: 100rpx;
		}

		/deep/ .u-size-medium {
			height: 30px;
			line-height: 30px;

		}
	}
</style>